<template>
  <div class="max-box pdl-0 pdb-0">
    <div class="header-box">
      <div class="header-left">
        <span>工单模板</span>
      </div>
      <a-button type="primary" class="add-btn" @click="openTopDrawer"
        >添加新模板</a-button
      >
    </div>
    <div class="content-box">
      <div class="one-template" v-for="(item,index) in orderTempalte" :key="index">
        <div class="left-box">
          <img :src="item.taskType == 1 ? inspectionImg : overhaulImg" alt="" class="order-img" />
          <div class="order-text">
            <div class="text-top">
              <span class="order-title">{{ item.taskName }}</span>
              ----- 更新于 {{ item.createTime }}
            </div>
            <div class="text-bottom">{{ item.taskDesc }}</div>
          </div>
        </div>
        <div class="right-box">
          <div class="flex-alignc-justifya operation-box">
            <!-- <a-icon type="edit" /> -->
            <a-icon
              type="delete"
              title="删除"
              @click="handleDel(item)"
            />
          </div>
          
        </div>
      </div>
    </div>

    <a-drawer :bodyStyle="{
        padding: '0.3rem 0 0 0',
      }" :closable="false" :destroyOnClose="true" :headerStyle="{
        background: '#f0f1f5',
        padding: '0 0.2rem 0 0.3rem',
      }" :visible="visible" @close="closeTopDrawer" height="100%" placement="top" wrapClassName="add-power">
      <template #title>
        <div class="head-box">
          <span>工单</span>
          <div class="head-btn">
            <a-button @click="closeTopDrawer">取消</a-button>
            <a-button class="save-btn" type="primary" @click="handleSubmit">保存</a-button>
          </div>
        </div>
      </template>
      <div class="content-box">
        <div class="flex h100 scroll-y" style="width: 80%; margin: auto">
          <a-form-model ref="form" :model="form" :rules="rules" class="w50">
            <a-form-model-item label="模板名称" prop="taskName">
              <a-input v-model="form.taskName"></a-input>
            </a-form-model-item>
            <a-form-model-item label="模板类型" prop="taskType">
              <a-select v-model="form.taskType">
                <a-select-option value="1">巡检单</a-select-option>
                <a-select-option value="2">检修单</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="描述" prop="taskDesc">
              <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入描述" v-model="form.taskDesc" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </a-drawer>

  </div>
</template>
<script>
import { templateList, addTemplate, delTemplate } from "@/api/workTemplate.js";
export default {
  name: "taskTemplate",
  data () {
    return {
      orderTempalte: [],
      inspectionImg: require("../../assets/workTemplate/workOrder1.svg"),
      overhaulImg: require("../../assets/workTemplate/workOrder2.svg"),
      visible: false,
      form: {
        taskName: '', // 工单模板名称
        taskDesc: '', // 模板描述
        taskType: '1', // 1 巡检单 2 检修单
      },
      rules: {
        taskName: [
          {
            required: true,
            message: "请填写模板名称",
            trigger: "suiyidingyi",
          },
        ],
        taskType: [
          {
            required: true,
            message: "请选择模板类型",
            trigger: "suiyidingyi",
          },
        ]
      }
    };
  },
  mounted () {
    this.getTemplateList();
  },
  methods: {
    getTemplateList () {
      templateList({}).then((res) => {
        this.orderTempalte = res.data;
        console.log(res);
      });
    },
    // 删除模板
    handleDel(item) {
      let that = this;
      this.$confirm({
        title: "确认删除该模板吗?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          delTemplate({
            id: item.id,
          }).then((res) => {
            that.getTemplateList();
          });
        },
      });
    },

    // 打开添加模板弹窗
    openTopDrawer () {
      this.visible = true
    },
    closeTopDrawer () {
      this.form = {
        taskName: '', // 工单模板名称
        taskDesc: '', // 模板描述
        taskType: '1', // 1巡检单，2检修单
      }
      this.visible = false
    },
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addTemplate(this.form).then((res) => {
            this.getTemplateList();
            this.closeTopDrawer();
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  height: 100%;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    flex-grow: 0;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .add-btn {
      font-size: 12px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
    .one-template {
      height: 68px;
      width: 100%;
      margin-top: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.0784313725);
      padding-bottom: 16px;
      box-sizing: content-box;
      display: flex;
      justify-content: space-between;
      .left-box {
        display: flex;
        align-items: center;
        .order-img {
          width: 56px;
          height: 56px;
        }
        .order-text {
          margin-left: 8px;
          box-sizing: border-box;
          padding-top: 8px;
          height: 100%;
          .text-top {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            margin-bottom: 8px;
            .order-title {
              color: #252b3a;
              font-size: 16px;
            }
          }
          .text-bottom {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
      .right-box {
        display: flex;
        font-size: 18px;
        align-items: center;
        i {
          cursor: pointer;
          &:hover {
            color: #048fff;
          }
        }
        .watch-box {
          margin: 0 16px;
        }
      }
    }
  }
}
.add-power {
  .head-box {
    width: 100%;
    height: 64px;
    font-size: 20px;
    color: #252b3a;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .head-btn {
      /deep/.ant-btn {
        font-size: 12px;
      }

      .save-btn {
        margin-left: 8px;
      }
    }
  }

  /deep/.ant-drawer-body {
    height: calc(100vh - 100px);
  }

  .content-box {
    width: 100%;
    height: 100%;
    padding-top: 24px;
    .report-textarea {
      resize: none;
      background-color: transparent !important;
    }
    .left {
      padding-right: 10px;

      /deep/.ant-form label {
        font-size: 12px;
        color: #00000073;
      }

      /deep/.ant-form-item-label {
        line-height: initial !important;
      }

      /deep/.ant-form-item {
        margin-bottom: 12px;
      }

      .tagBox-wrap {
        position: relative;
        border: 1px solid #d9d9d9;
        line-height: initial;
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px;
      }
    }

    .flow {
      padding-left: 10px;
      border-left: 1px solid rgba(0, 0, 0, 0.08);

      li {
        position: relative;
        padding: 0 40px 60px 40px;

        &:before {
          position: absolute;
          display: block;
          content: "";
          top: 3px;
          left: 3px;
          width: 10px;
          height: 10px;
          background-color: hsla(0, 0%, 50.2%, 0.6);
          border-radius: 50%;
        }

        &:after {
          position: absolute;
          display: block;
          content: "";
          top: 8px;
          bottom: -3px;
          left: 7px;
          width: 1px;
          background-color: rgba(0, 0, 0, 0.08);
          border-radius: 1px;
        }

        &:last-child {
          &:after {
            display: none;
          }
        }
        .add-member {
          position: absolute;
          top: 0;
          right: 0;
        }
        .tip {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.45);
        }

        .header {
          position: relative;
          margin-bottom: 10px;

          img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }

          .close {
            position: absolute;
            top: -20%;
            right: -20%;
          }
        }
      }
    }
  }
}
</style>
